<template>
  <div class="app-container home">
    <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="24">
            <el-card class="update-log">
                <el-descriptions :title="title" direction="vertical" :column="4" border>
                    <template slot="extra">
                        <el-form ref="form" :model="form" label-width="auto">
                            <el-form-item label="城市" prop="city">
                                <el-select v-model="form.city" @change="cityChange" placeholder="请选择城市">
                                    <el-option
                                        v-for="item in cityList"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </template>
                    <el-descriptions-item label="现有确诊">
                        <el-tag size="small" type="danger">{{ cityEpidemicData.total.nowConfirm }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="本土无症状">
                        <el-tag size="small" type="danger">{{ cityEpidemicData.total.wzz }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="累计确诊">
                        <el-tag size="small" type="danger">{{ cityEpidemicData.total.confirm }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="累计死亡">
                        <el-tag size="small" type="danger">{{ cityEpidemicData.total.dead }}</el-tag>
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
        </el-col>
    </el-row>
    <el-row>
        <el-col :xs="12" :sm="12" :md="12" :lg="12">
        <el-card class="update-log">
            <div id="province_map_box">
                <div id="province_map" style="width: 100%;height:700px;"></div>
            </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :md="12" :lg="12">
        <el-card class="update-log">
            <div id="china_map_box">
                <div id="china_map" style="width: 100%;height:700px;"></div>
            </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";       
import 'echarts/map/js/china.js';
import { listApplicationMaterials } from "@/api/rural/epidemicData";
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.3.0",
      options: {
        title: {
            text: '全国现有确诊',
            left: 'center'
        },
        tooltip: {
          triggerOn: "mousemove",   //mousemove、click
          padding:8,
          borderWidth:1,
          borderColor:'#409eff',
          backgroundColor:'rgba(255,255,255,0.7)',
          textStyle:{
            color:'#000000',
            fontSize:13
          }
        },
        visualMap: {
          show:true,
          left: 26,
          bottom: 40,
          showLabel:true,
          pieces: [
            {
              gte: 10000,
              label: ">= 10000人",
              color: "#FF1F05"
            },
            {
              gte: 1000,
              lt: 9999,
              label: "1000 - 9999人",
              color: "#FF2736"
            },
            {
              gte: 500,
              lt: 999,
              label: "500 - 999人",
              color: "#FF6341"
            },
            {
              gte: 100,
              lt: 499,
              label: "100 - 499人",
              color: "#E1A577"
            },
            {
              gte: 10,
              lt: 99,
              label: "10 - 99人",
              color: "#E1CEA0"
            },
            {
              gte: 1,
              lt: 9,
              label: "1 - 9人",
              color: "#E1E7B2"
            },
            {
              lt:0,
              label:'0人',
              color: "#E2EBF4"
            }
          ]
        },
        geo: {
          map: "china",
          scaleLimit: {
            min: 1,
            max: 2
          },
          zoom: 1,
          top: 120,
          label: {
            normal: {
              show:true,
              fontSize: "14",
              color: "rgba(0,0,0,0.7)"
            }
          },
          itemStyle: {
            normal: {
              //shadowBlur: 50,
              //shadowColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
              areaColor: "#f2d5ad",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0
            }
          }
        },
        series: [
          {
            name: "现有确诊",
            type: "map",
            geoIndex: 0,
            data:[]
          }
        ]
      },
      dataList: [],
      cityList: [],
      mapData: [],
      city: "",
      form: {
        city: "广东"
      },
      cityEpidemicData:{},
      provinceChildren: [],
      provinceChildrenData: [],
      title: null,
      provinceTitle: null,
      provinceOption: {
        title: {
            text: '',
            left: 'center'
        },
         tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'shadow'
            },
            feature: {
            mark: { show: true },
            restore: { show: true },
            saveAsImage: { show: true }
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
            type: 'category',
            data: [],
            axisTick: {
                alignWithLabel: true
            }
            }
        ],
        yAxis: [
            {
            type: 'value'
            }
        ],
        series: [
            {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: []
            }
        ]
      }
    };
  },
  created(){
      
  },
  mounted(){
      listApplicationMaterials().then(response => {
        let msg = JSON.parse(response.msg)
        this.mapData = msg.data.diseaseh5Shelf.areaTree[0].children
        for (let i = 0; i < this.mapData.length; i++ ){
            let cityData = {}
            cityData.name = this.mapData[i].name
            cityData.value = this.mapData[i].total.nowConfirm
            this.cityList.push(this.mapData[i].name)
            this.dataList.push(cityData)
            if(this.form.city === this.mapData[i].name){
              this.cityEpidemicData = this.mapData[i]
              this.title = this.mapData[i].name + "疫情数据"
              this.provinceTitle = this.mapData[i].name + "现有确诊"
            }
        }
        for (let i = 0; i < this.cityEpidemicData.children.length; i++){
            this.provinceChildren.push(this.cityEpidemicData.children[i].name)
            this.provinceChildrenData.push(this.cityEpidemicData.children[i].total.nowConfirm)
        }
        this.options.series[0].data = this.dataList;
        this.$nextTick(()=>{
          this.initEchartMap();
          this.initEchartProvinceMap()
      })
      })
  },
  methods: {
    //初始化中国地图
    initEchartMap() {
      let mapDiv = document.getElementById('china_map');
      let myChart = echarts.init(mapDiv);
      console.log(this.options.series[0]['data'])
      myChart.setOption(this.options);
    },
     initEchartProvinceMap() {
      let mapDiv = document.getElementById('province_map');
      let myChart = echarts.init(mapDiv);
      this.provinceOption.title.text = this.provinceTitle
      this.provinceOption.xAxis[0].data = this.provinceChildren
      this.provinceOption.series[0].data = this.provinceChildrenData
      myChart.setOption(this.provinceOption,{notMerge: true});
      this.$forceUpdate()
    },
    cityChange(e){
      for (let i = 0; i < this.mapData.length; i++ ){
        if(this.form.city === this.mapData[i].name){
          this.cityEpidemicData = this.mapData[i]
          this.title = this.mapData[i].name + "疫情数据"
          this.provinceTitle = this.mapData[i].name + "现有确诊"
        }
      }
      this.provinceChildren = []
      this.provinceChildrenData = []
      for (let i = 0; i < this.cityEpidemicData.children.length; i++){
            this.provinceChildren.push(this.cityEpidemicData.children[i].name)
            this.provinceChildrenData.push(this.cityEpidemicData.children[i].total.nowConfirm)
        }
        this.$nextTick(()=>{
          this.initEchartProvinceMap()
      })
    }
  },

};
</script>

<style scoped lang="scss">
#china_map_box {
        height: 100%;
        position: relative;
    }
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

